<template>
	<view>
        <view class="banner">
            <!-- <img src="@/static/img00/banner.png" alt=""> -->
            <img :src="imageList['011eeed9d1825afb45d8aaace82f1e1c']"/>
        </view>
		
        <view class="appointment">
            <view class="num">
                已有 <span>1638人</span> 预约免费专车看房
            </view>    

            <view class="boy">
                <p class="call">您的称呼:</p>

                <radio-group name="radio" class="sex">
                    <label class="nam">
                        <radio value="checkbox1" checked="" class="check" @click="setSex(1)" />
                        <view class="text"> 先生</view> 
                    </label>                  
                    <label class="girl">
                        <radio value="checkbox2" class="check on" @click="setSex(2)" />
                        <view class="text">女士</view>
                    </label>           
                </radio-group>

                <p class="order">预约看房时间:</p>

                <view class="order-input">
                    <input class="input-s" type="tel" @input="onKeyInput" :value="time" placeholder="与我确认联系时间">
                </view>

                <p class="relation" v-if="show_input == 1">您的联系方式:</p>
                <view class="relation-input" v-if="show_input == 1">
                    <input class="input-x" type="tel" @input="onKeyInput2" :value="mobile" placeholder="请输入您的手机号" >
				</view> 
            </view>
			
            <button v-if="show_input == 1" class="btn-area" @click="sub()">
                预约免费专车看房
            </button>
			
			<button v-if="show_input == 0" class="btn-area" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" >预约免费专车看房</button>
			
        </view>
	</view>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				sex : 1,
				time:'',
                mobile:'',
                imageList:[],
				code:'',
				show_input:0  
			}
		},
		onLoad() {
			this.show_input = 0;
			this.initData();
		},
		methods: {
			myClick(){
				this.$refs.updata.$el.click();
			},
            initData() {
            //获取图片
                this.$api.getImage({
                    ids: '011eeed9d1825afb45d8aaace82f1e1c'
                },
                res => {
                    this.imageList = res;
                });
				
				if (this.$db.get('mobile')) {
					this.mobile = this.$db.get('mobile');
				}else{
					// #ifdef MP-WEIXIN
					this.getWxCode()
					// #endif
				}
		    },
			sub(){
				let sex = this.sex;
				let time = this.time;
				let phone = this.mobile;
				if(phone == ''){
					uni.showToast({
					    title: '手机号码不能为空',
					    duration: 2000,
						icon:'none'
					});
					return false;
				}
				
				var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
				if (!myreg.test(phone)) {
					uni.showToast({
					    title: '请输入正确的手机号',
					    duration: 2000,
						icon:'none'
					});
					return false;
				}
				
				
				this.$api.getPushCar({
						sex:sex,
						time:time,
						phone:phone
					},
					res => {
						if(res.code == 1){
							uni.showToast({
							    title: '需求已提交',
							    duration: 2000
							});
							this.sex = 1;
							this.time = '';
							this.mobile = '';
							// console.log(res)
						}else{
							uni.showToast({
							    title: '提交失败',
							    duration: 2000,
								icon:'none'
							});
						}
						
					}
				);
				
			},
			setSex(i){
				this.sex = i;
			},
			onKeyInput: function(event) {
				this.time = event.target.value
			},
			
			onKeyInput2: function(event) {
				this.mobile = event.target.value
			},
			getWxCode() {
				let that = this
				uni.login({
					scopes: 'auth_user',
					success: function(res) {
					console.log(res.code)
						if (res.code) {
							that.wxLoginStep1(res.code)
							
						} else {
							this.$common.errorToShow('未取得code')
						}
					},
					fail: function(res) {
						this.$common.errorToShow('用户授权失败wx.login')
					}
				})
			},
			wxLoginStep1(code) {
				this.code = code;
				this.$api.login1({
					code
				}, res => {
					if (res.status) {
						this.open_id = res.data
					} else {
						this.$common.errorToShow(res.msg, function() {
							uni.navigateBack({
								delta: 1
							})
						})
					}
				})
			},
			getPhoneNumber:function(e){
				var _this = this;
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					var encryptedData = e.detail.encryptedData;
					var iv = e.detail.iv;
					
					uni.login({
						provider:'weixin',
						success:(res)=>{
							var code = res.code;
							_this.$api.getSessionKey({
								'encryptedData':encryptedData,
								'iv':iv,
								'code':code
							}, (res)=>{
								console.log(res);
								if(res.status){
									_this.$db.set('mobile',res.data.phoneNumber);
									_this.mobile = res.data.phoneNumber;
								}
								_this.sub();
							})
						}
					})
					_this.show_input = 0;
				} else {
					_this.show_input = 1;
				}
			},
		}
	}
</script>

<style scoped>
    *{
        padding: 0;
        margin: 0;
    }

    .banner>img{
        width: 100%;
        height: 400rpx;
    }
    .appointment{
        height: 720rpx;
        width: 710rpx;
        background: #fff;
        margin: 0 auto;
        margin-top: 10rpx;
    }
    .num{
        font-size: 32rpx;
        padding: 30rpx 0 30rpx 0;
        text-align: center;
    }
    .num>span{
        font-weight: 550;
    }

    .boy{
        margin:0 20rpx 0 20rpx ;
    }
    .call,.order,.relation{
        font-size: 28rpx;
        color: #999;
        letter-spacing: 2rpx;
        margin-top: 20rpx;
    }

    .order-input,.relation-input{
        height: 80rpx;
        width: 650rpx;
        margin-top: 20rpx;
    }

    .sex{
        font-size: 2.8rpx;
        height: 40rpx;
        margin-top: 20rpx;
        /* width: 100%; */
    }
    .nam,.girl{
        height: 40rpx;
        width: 120rpx; 
        float: left;
    }
    .text{
        font-size: 24upx;
    }

    .check{
        width: 34rpx;
        height: 34rpx;
        border-radius: 50%;
        background: #f4f4f4;
        float: left;
        margin-right: 20rpx;
    }
    .girl{
        margin-left: 120rpx;
    }

    .input-s,.input-x{
        height: 80rpx;
        width: 600rpx;
        background: #f4f4f4;
        border-radius: 10rpx;
        padding-left: 20rpx;
    }

    .phone{
        font-size: 24rpx;
        color: #ff6d6f;
        margin-top: 4rpx;
        display: none;
    }

    .btn-area{
        height: 80rpx;
        width: 360rpx;
        background: #13c3c3;
        color: #fff;
        line-height: 80rpx;
        margin: 0 auto;
        margin-top: 30rpx;
        font-size: 30rpx;
        border-radius: 140rpx;
        -moz-border-radius:140rpx;
    }

	.newPhone{
		width: 620rpx;
		text-align: left;
		padding-left: 24rpx;
		
		background: #7ADBDB;
		height: 100%;
		line-height: 80rpx;
		color: #fff;
		font-size: 32rpx;
		margin: 0;

	}


</style>
